<template>
<div class="mx-auto bg-gray-50 ">
    <div class="flex items-center justify-between px-6 py-4 bg-white">
        <div class="flex-1">
            <el-button type="primary" round :icon="Plus" @click="createPaperClick"> 新建考试 </el-button>
            <el-button round class="w-20" @click="handlePaperSore">试卷库</el-button>
            <el-button round  class="w-20">监考</el-button>
        </div>
        <div class="flex-1 flex items-center justify-end gap-4 right-div">
            <el-input v-model="keyWord" placeholder="试卷名" style="width: 200px">
            </el-input>
            <el-icon class="z-10 text-gray-400 absolute right-[30px] top-[43px] text-xl">
            <Search />
            </el-icon>
        </div>
    </div>
    <!-- 筛选区域 -->
    <div class="px-6 py-4 bg-white ">
        <div class="flex items-center  flex-wrap gap-6 :md:space-x-0">
            <div class="flex items-center space-x-2 ">
            <el-select
                v-model="classId"
                placeholder="全部班级"
                @change="handleClassChange"
                class="w-60">
                <template #header>
                    <div class="right-div ">
                        <el-input v-model="className" placeholder="搜索班级名" ></el-input>
                    </div>
                </template>

                <el-option v-for="item in classList" :key="item.id" :label="item.name" :value="item.id"/>
            </el-select>
            </div>
            <div class="flex items-center space-x-2">
                <span class="text-gray-400 mr-6">状态</span>
                <el-radio-group v-model="status" class="ml-2"  @change="handleStatusSearch">
                    <el-radio v-for="(item,index) in statusList" :key="index" :value="item">{{ item }}</el-radio>
                </el-radio-group>
            </div>
        </div>
    </div>
    <!-- 试卷列表区域 -->
     <div class="flex flex-col bg-white p-4">
        <div class="flex flex-col p-2 mb-6 border-b border-gray-200 cursor-pointer" v-for="(item,index) in paperList" :key="index"
        @mouseenter="item.showAction = true" @mouseleave="item.showAction = false" >
            <span class="text-lg text-gray-600" @click="handleRowClick(item)">{{ item.name }}</span>
            <div class="my-4 flex items-center justify-between ">
              
                <div class="flex-1 flex items-center justify-between ">
                      <!--试卷名称、班级和时间 -->
                    <div class="flex  flex-col space-y-2 ">
                        <div class="text-gray-500/80  text-sm ">
                            <font-awesome-icon icon="fas fa-users" class="mr-2 text-gray-400"></font-awesome-icon>
                            <span v-for="(cla,index) in item.clazz" :key="index">{{ cla }}
                                <span v-if="index < item.clazz.length - 1">、</span>
                            </span>
                        </div>
                        <span class="text-gray-500/80 text-sm">
                            <font-awesome-icon icon="far fa-clock" class="mr-2 text-gray-400"></font-awesome-icon>
                            考试时间：{{ formatTime(item.startTime) }} 至 {{ formatTime(item.endTime) }}</span>
                    </div>
                    <!-- 发布补考 修改设置 删除按钮 -->
                    <div class="flex  items-center space-x-2 " v-show="item.showAction">
                        <el-button  type="primary" link class="w-20 bg-blue-500/75" @click.stop="publishMapUp">发布补考</el-button>
                        <el-button  type="primary" link class="w-20 bg-blue-500/75" @click.stop="updateSettings(item)">修改设置</el-button>
                        <el-button  type="primary" link class="w-20 bg-blue-500/75" @click.stop="deletePaper(item)">删除</el-button>
                    </div>
                 </div>   

                <!-- 批阅相关的按钮 -->
                <div class="flex  items-center  space-x-4 ">
                    <div class="flex items-end space-x-2 ">
                        <div>
                            <span class="font-bold text-2xl">{{ item.waitingApproval }}</span>
                            <span class="text-gray-500"> 待批</span>
                        </div>
                        <span class="text-gray-400">{{ item.submitPaper }} 已交</span>
                        <span class="text-gray-400">{{ item.unSubmitPaper }} 未交</span>
                    </div>
                    <el-button  type="primary" round class="w-20 bg-blue-500/75" @click="handlePaperReview(item)">批阅</el-button>
                 </div>   

            </div>
        </div>    

     </div>


     <!-- dialog删除 -->
        <el-dialog v-model="deleteDialogVisible" title="删除"  width="20%" class="rounded-lg">  
      <div class="text-base py-4 px-2 text-gray-500">删除后可在回收站内还原？</div>
         <template #header="{ close, titleId, titleClass }">
          <div class="my-header border-b pb-4">
            <span :id="titleId" :class="titleClass">
              提示 
            </span>
            
          </div>
        </template>
      <template #footer>
          <div class="py-4 px-6 border-t flex items-center justify-end">
            <div class="flex gap-4">
              <el-button @click="deleteDialogVisible=false" round class="w-20"> 取消 </el-button>
              <el-button type="primary" @click="deleteItem" round class="w-20"> 确定 </el-button>
            </div>
          </div>
        </template>
     </el-dialog> 


</div>


</template>

<script setup>
import { ref } from 'vue'
import { Plus, Search } from '@element-plus/icons-vue'
import { dayjs } from 'element-plus'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { useRouter } from 'vue-router'
import { usePaperStore } from '@/store/paper'
import { useTabsStore } from '@/store/tabs'
import {useEditPaperStore} from "@/store/editPaper"
const editPaperStore = useEditPaperStore()
const router = useRouter()
const  tabsStore = useTabsStore()
const  paperStore = usePaperStore()

//点击创建试卷的按钮
const  createPaperClick = () => {
    tabsStore.addTab({
      name: 'CreatePaper',
      title: '新建试卷',
    });
    editPaperStore.paperId = null
    router.push({name:'CreatePaper'})
}

//搜索关键词 试卷名
const  keyWord = ref('')
// 下拉选择框班级名
const  className = ref('')

// 班级id
const classId = ref(0)
const status = ref('全部')
//  班级列表
const classList = ref([
    { id:0,name: '全部班级', },
    { id:1,name: '操作系统原理', },
    { id:2,name: '计算机网络', },
])
// 试卷状态
const  statusList = ref(["全部", "未开始", "进行中", "已结束"])
//  试卷列表
const paperList = ref([
    { id:1,name: '操作系统原理', clazz:["软件231班","软件232班"],startTime:'2025-06-12 15:10:00',endTime:'2025-06-12 16:40:00',status:'已结束',
       waitingApproval: 0,submitPaper: 10,unSubmitPaper: 10, showAction: false
    },
    { id:2,name: '数据分析与可视化', clazz:["软件232班"],startTime:'2025-06-12 15:10:00',endTime:'2025-06-12 16:40:00',status:'已结束',
       waitingApproval: 0,submitPaper: 10,unSubmitPaper: 10, showAction: false
    },
])

// 时间处理的方法 
const  formatTime = (time) => {
    return dayjs(time).format('MM-DD HH:mm')

}
// 处理班级下拉选择框变化的事件
const handleClassChange = (val) => {
    console.log("根据班级id检索试卷数据",val);
    //todo  调用后端接口 根据班级id检索试卷数据

}

// 处理试卷状态筛选的事件
const handleStatusSearch = (val) => {
    console.log("根据试卷状态筛选",val);
    //todo  调用后端接口 根据班级id检索试卷数据
}

// 处理修改设置按钮的点击事件
const  updateSettings = (row) => {
    tabsStore.addTab({
      name: 'UpdateSettings',
      title: '发放设置',
    });
    router.push({name:'UpdateSettings',params:{paperId:row.id,source:'modify'}})
}
// 发布补考
const publishMapUp = () => {
    tabsStore.addTab({
      name: 'PaperStore',
      title: '试卷库',
    });


    router.push({name:'PaperStore'})
}
//点击删除 
const  deleteDialogVisible =ref(false)
// 被选择删除的 
const  selectedDelete = ref(null)
const  deletePaper = (row) => {
    console.log("删除试卷",row);
    deleteDialogVisible.value = true
    selectedDelete.value = row
}

// 点击删除按钮的事件
const  deleteItem = () => {
    console.log("删除试卷");
    deleteDialogVisible.value = false
}

// 点击试卷库
const handlePaperSore = () => { 
    tabsStore.addTab({
      name: 'PaperStore',
      title: '试卷库',
    });
    router.push({name:'PaperStore'})
}
// 点击批阅按钮
const  handlePaperReview = (row) => {
    tabsStore.addTab({
      name: 'PaperReview',
      title: '试卷批阅',
    });
    paperStore.paperId = row.id
    router.push({name:'PaperReview',params:{paperId:row.id}})
}

// 点击行
const  handleRowClick = (row) => {
    console.log("点击行",row);
    tabsStore.addTab({
      name: 'PaperDetail',
      title: '试卷详情',
    });
     paperStore.paperId = row.id
    router.push({ name: 'PaperDetail', query: { id: row.id } 
});
   
}


</script >
<style lang="less" scoped>
.right-div .el-input {
  border: 1px solid #e5e7eb;
  border-radius: 20px;
}
.right-div .el-input :deep(.el-input__wrapper) {
  background-color: #f3f4f6;
  border: none;
  border-radius: 20px;
  box-shadow: none;
}
.el-select :deep(.el-input__wrapper) {
  background-color: #f3f4f6;
  border: none;
  box-shadow: none;
}
</style>